<template>
  <div class="goodscontent">
    <div class="goodslist">
      <div class="goodItem">
        <section class="gheader flex">
          <div class="orderno">订单号：201526535689568</div>
          <div class="gstatus">待付款</div>
        </section>
        <section class="gcontent">
          <div class="receiverInfo">
            <div class="">
              <i class="icon_child icon-receiver"></i>
              <span class="receiver-info">
               收货人/电话：张三张三张三张三  18903945667
             </span>
            </div>
            <div>
              <i class="icon_child icon-receiver-address"></i>
              <span class="receiver-info">
               收货地址：北京市朝阳区3环以内劲松3区11号
             </span>
            </div>
          </div>
          <div class="goodInfo flex">
            <img src="../../assets/goods.png"/>
            <div>
              <p class="gtitle">一副不折断的老花镜，仅1张名片重量，树脂蓝 光老花眼镜</p>
              <p class="fee">￥2000(免运费) <span class="number"> x1 </span></p>
            </div>
          </div>
          <div class="message">
            <p>买家留言：一定要发顺丰谢谢</p>
          </div>
          <div class="coupon">
            <span>优惠￥30.00</span>
            <span class="totalcount">合计:<span class="redcolor">￥170.00</span>(免运费￥0)</span>
          </div>
        </section>
        <section class="gfooter">
          <div class="buttonlist">
            <span @click="cancelOrder()">取消订单</span>
            <span>邀请他人代付</span>
            <span class="action" v-link="{name:'payment',param:{}}">去付款</span>
          </div>
        </section>
      </div>
      <div class="goodItem">
        <section class="gheader flex">
          <div class="orderno">订单号：201526535689568</div>
          <div class="gstatus">待收货</div>
        </section>
        <section class="gcontent">
          <div class="receiverInfo">
            <div class="">
              <i class="icon_child icon-receiver"></i>
              <span class="receiver-info">
               收货人/电话：张三张三张三张三  18903945667
             </span>
            </div>
            <div>
              <i class="icon_child icon-receiver-address"></i>
              <span class="receiver-info">
               收货地址：北京市朝阳区3环以内劲松3区11号
             </span>
            </div>
          </div>
          <div class="goodInfo flex">
            <img src="../../assets/goods.png"/>
            <div>
              <p class="gtitle">一副不折断的老花镜，仅1张名片重量，树脂蓝 光老花眼镜</p>
              <p class="fee">￥2000(免运费) <span class="number"> x1 </span></p>
            </div>
          </div>
          <div class="message">
            <p>买家留言：一定要发顺丰谢谢</p>
          </div>
          <div class="coupon">
            <span>优惠￥30.00</span>
            <span class="totalcount">合计:<span class="redcolor">￥170.00</span>(免运费￥0)</span>
          </div>
        </section>
        <section class="gfooter">
          <div class="buttonlist" @click="confirmOrder()">
            <span>确认收货</span>
          </div>
        </section>
      </div>
      <div class="goodItem">
        <section class="gheader flex">
          <div class="orderno">订单号：201526535689568</div>
          <div class="gstatus">已完成</div>
        </section>
        <section class="gcontent">
          <div class="receiverInfo">
            <div class="">
              <i class="icon_child icon-receiver"></i>
              <span class="receiver-info">
               收货人/电话：张三张三张三张三  18903945667
             </span>
            </div>
            <div>
              <i class="icon_child icon-receiver-address"></i>
              <span class="receiver-info">
               收货地址：北京市朝阳区3环以内劲松3区11号
             </span>
            </div>
          </div>
          <div class="goodInfo flex">
            <img src="../../assets/goods.png"/>
            <div>
              <p class="gtitle">一副不折断的老花镜，仅1张名片重量，树脂蓝 光老花眼镜</p>
              <p class="fee">￥2000(免运费) <span class="number"> x1 </span></p>
            </div>
          </div>
          <div class="message">
            <p>买家留言：一定要发顺丰谢谢</p>
          </div>
          <div class="coupon">
            <span>优惠￥30.00</span>
            <span class="totalcount">合计：<span class="redcolor">￥170.00</span>(免运费￥0)</span>
          </div>
        </section>
        <section class="gfooter">
          <div class="buttonlist">

          </div>
        </section>
      </div>
      <div class="goodItem">
        <section class="gheader flex">
          <div class="orderno">订单号：201526535689568</div>
          <div class="gstatus">已取消</div>
        </section>
        <section class="gcontent">
          <div class="receiverInfo">
            <div class="">
              <i class="icon_child icon-receiver"></i>
              <span class="receiver-info">
               收货人/电话：张三张三张三张三  18903945667
             </span>
            </div>
            <div>
              <i class="icon_child icon-receiver-address"></i>
              <span class="receiver-info">
               收货地址：北京市朝阳区3环以内劲松3区11号
             </span>
            </div>
          </div>
          <div class="goodInfo flex">
            <img src="../../assets/goods.png"/>
            <div>
              <p class="gtitle">一副不折断的老花镜，仅1张名片重量，树脂蓝 光老花眼镜</p>
              <p class="fee">￥2000(免运费) <span class="number"> x1 </span></p>
            </div>
          </div>
          <div class="message">
            <p>买家留言：一定要发顺丰谢谢</p>
          </div>
          <div class="coupon">
            <span>优惠￥30.00</span>
            <span class="totalcount">合计：<span class="redcolor">￥170.00</span>(免运费￥0)</span>
          </div>
        </section>
        <section class="gfooter">
          <div class="buttonlist">

          </div>
        </section>
      </div>
      <div class="goodItem">
        <section class="gheader flex">
          <div class="orderno">订单号：201526535689568</div>
          <div class="gstatus">已退货</div>
        </section>
        <section class="gcontent">
          <div class="receiverInfo">
            <div class="">
              <i class="icon_child icon-receiver"></i>
              <span class="receiver-info">
               收货人/电话：张三张三张三张三  18903945667
             </span>
            </div>
            <div>
              <i class="icon_child icon-receiver-address"></i>
              <span class="receiver-info">
               收货地址：北京市朝阳区3环以内劲松3区11号
             </span>
            </div>
          </div>
          <div class="goodInfo flex">
            <img src="../../assets/goods.png"/>
            <div>
              <p class="gtitle">一副不折断的老花镜，仅1张名片重量，树脂蓝 光老花眼镜</p>
              <p class="fee">￥2000(免运费) <span class="number"> x1 </span></p>
            </div>
          </div>
          <div class="message">
            <p>买家留言：一定要发顺丰谢谢</p>
          </div>
          <div class="coupon">
            <span>优惠￥30.00</span>
            <span class="totalcount">合计：<span class="redcolor">￥170.00</span>(免运费￥0)</span>
          </div>
        </section>
        <section class="gfooter">
          <div class="buttonlist">

          </div>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
  import {ctoast, confirmDialog} from '../../common/js/common'
  export default({
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      cancelOrder () {
        let dialog = this.createConfirmDialog('您确实已收到物品了吗？确定后不可返回', function () {
          dialog.close()
        }, function () {
          dialog.close()
        })
      },
      confirmOrder () {
        this.createConfirmDialog('您确定已收到物品了吗？', function () {
          close()
        }, function () {
          close()
        })
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  paddintTop()
  padding-top cal(30) rem
  padding-bottom cal(30) rem

  .icon-receiver
    background-position -0rem -4.3rem
    align-self flex-start

  .icon-receiver-address
    align-self flex-start
    background-position -0rem -5.45rem

  .goodscontent
    padding cal(20) rem
    overflow-y auto
    position fixed
    width 100%
    height 100%
    padding-bottom 1rem
    .flex
      display flex
      justify-content flex-start
      align-items center
    .goodslist
      display flex
      flex-direction column
      .goodItem
        background #fff
        margin-bottom cal(20) rem
        padding-left cal(25) rem
        padding-right cal(25) rem
        border bordercolor
        border-radius 3px
        .gheader
          line-height cal(85) rem
          setFontsize(18px)
          color #333
          display flex
          justify-content space-between
          border-bottom bordercolor
          .orderno
            flex 1 1 auto
          .gstatus
            color yellowColor
        .gcontent
          color #666
          & > div
            paddintTop()
            border-bottom bordercolor
          .receiverInfo
            setFontsize(16px)
            line-height 0.75rem
            & > div
              margin-bottom cal(20) rem
              setFlex(space-between, center)
              &:last-child
                margin-bottom 0
            .receiver-info
              flex 1
          img
            width cal(140) rem
            height cal(140) rem
            margin-right cal(20) rem
          .gtitle
            setFontsize(12px)
            color #333
          .fee
            color redColor
            setFontsize(12px)
            .number
              color #999
              float right
          .message, .coupon
            p, span
              setFontsize(16px)
              color #666
            .redcolor
              color redColor
            .totalcount
              float right
        .gfooter
          paddintTop()
          .buttonlist
            float right
            margin-bottom cal(30) rem
            span
              setFontsize(12px)
              display inline-block
              padding cal(20) rem
              padding-top cal(15) rem
              padding-bottom cal(15) rem
              border 1px solid #999
              color #666
              border-radius 3px
              margin-right cal(20) rem
              &:not(.action):last-child
                margin-right 0rem
              &.action
                background yellowColor
                color #fff
                border-color yellowColor
                margin-right 0
</style>
